<template>
  <view>

    <view class="color-box" :style="'background: url(' +  imgpath + 'luyi/unit/2023/11/01/3011.png);'">
      <view class="user-info">
        <view class="img-box">
          <image src="/static/images/avatar.jpg"></image>
        </view>
        <view class="info-box">
          <view class="" style="width: 200rpx; color: #fff;">{{personName}}</view>
          <view class="" style="font-size: 28rpx; padding-top: 8rpx; width: 200rpx; color: #fff;">{{personPhone}}</view>
        </view>
      </view>
    </view>



    <view class="info-pos">
      <view class="base-info" style="font-size: 30rpx;">基本信息</view>
      <view class="info">
        <view class="info-box" style="font-size: 28rpx; width: 150rpx;">姓名</view>
        <input v-model="personName" style="font-size: 14px;" />
      </view>
      <view class="info">
        <view class="info-box" style="font-size: 28rpx; width: 150rpx;">性别</view>
        <input :value="personSex==1?'男':'女'" style="font-size: 14px;" />
      </view>
      <view class="info">
        <view class="info-box" style="font-size: 28rpx; width: 150rpx;">联系电话</view>
        <input v-model="personPhone" maxlength="11" style="font-size: 14px;" />
      </view>
      <view class="info">
        <view class="info-box" style="font-size: 28rpx; width: 150rpx;">联系地址</view>
        <input v-model="personAddress" style="font-size: 14px;" />
      </view>
    </view>


    <view class="enter-btn">
      <button @click="submit">修改人员信息</button>
    </view>
  </view>
</template>

<script>
  import util from "../../../common/util.js"
  import icon from "../../../uni_modules/uview-ui/libs/config/props/icon.js"
  export default {
    data() {
      return {
        id: 0,
        isHeader: 0,
        personAddress: "",
        personGroup: 0,
        personIdentity: 0,
        personIdentityCard: "",
        personName: "",
        personPhone: "",
        personProject: "",
        personRelativeProject: 0,
        personSex: 0,
        personStatus: 0,
        imgpath:  this.imgpath
      }
    },
    onLoad(options) {
      this.getInfo(options.id)
    },
    methods: {
      getInfo(id) {
        uni.$get(this.path + '/person/get/' + id).then(res => {
          if (res.code == 200) {
            this.id = res.data.id
            this.personName = res.data.personName
            this.personSex = res.data.personSex
            this.personPhone = res.data.personPhone
            this.personAddress = res.data.personAddress
          }
        })
      },
      submit() {
        console.log(this.personPhone.length);
        if (this.personName.length < 2) {
          uni.showToast({
            icon: 'none',
            title: '请输入正确的名字'
          })
        } else if (this.personPhone.length < 11) {
          uni.showToast({
            icon: 'none',
            title: '请输入11位电话号码'
          })
        } else if (this.personAddress.length <= 0) {
          uni.showToast({
            icon: 'none',
            title: '请输入正确地址'
          })
        } else {
          uni.$put(this.path + '/person/update', {
            id: this.id,
            personName: this.personName,
            personPhone: this.personPhone,
            personAddress: this.personAddress
          }).then(res => {
            uni.showToast({
              icon: 'none',
              title: '修改成功'
            })
            setTimeout(() => {
              uni.navigateTo({
                url: './index'
              })
            }, 1000)
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  .color-box {
    height: 463rpx;
    // background: url('../../../static/images/3011.png');
    border-radius: 0 0 30rpx 30rpx;

    .user-info {
      display: flex;
      align-items: center;

      .img-box {
        position: absolute;
        top: 60rpx;
        left: 40rpx;
        width: 155rpx;
        height: 155rpx;
        border-radius: 50%;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .info-box {
        position: absolute;
        top: 89rpx;
        left: 223rpx;
        width: 50rpx;
        font-size: 28rpx;
        color: #888888;
      }
    }
  }

  .info-pos {
    position: fixed;
    height: 275rpx;
    width: 710rpx;
    border-radius: 16rpx;
    margin: 0 20rpx 20rpx 20rpx;
    background-color: #fff;

    .qianyue-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 105rpx;
      border-bottom: 1px solid #afafaf;

      .qianyue-info {
        display: flex;
        align-items: center;
        padding-left: 20rpx;

        .images {
          width: 40rpx;
          height: 40rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .qianyue-text {
          font-size: 32rpx;
          font-weight: 500;
        }
      }

      .qianyue-detail {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #6E81A0;
        font-size: 28rpx;
        padding-right: 46rpx;

        .qianyue-dtext {
          font-size: 24rpx;
        }
      }
    }

    .data-box {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 150rpx;

      .data-info {
        height: 150rpx;
        width: 30%;
        font-size: 48rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #055DFE;

        .zhushi {
          margin-top: 6rpx;
          font-size: 28rpx;
          color: #AFAFAF;
        }
      }
    }
  }





  page {
    background-color: #F6F9FC;
  }

  .info-pos {
    position: absolute;
    top: 135px;
    width: 95%;
    left: 2.5%;
    margin: 0 auto;
    background: white;
    border-radius: 16rpx;
    background-color: #FFF;

    .info {
      margin: 20rpx auto;
      display: flex;
      width: 95%;
      height: 40px;
      align-items: center;
      border-bottom: 1px solid #c8c8c8;

      input {
        margin-left: 20rpx;
        width: calc(100% - 70rpx);
        color: black;
      }

      .info-box {
        width: 60rpx;
        font-size: 14rpx;
        color: #afafaf;
      }

    }

    .base-info {
      width: 95%;
      margin: 0 auto;
      margin-top: 10rpx;
      font-size: 16rpx;
    }
  }

  .enter-btn {
    position: fixed;
    bottom: 250rpx;
    height: 150rpx;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    button {
      width: 80%;
      background-color: #2f67ff;
      height: 70rpx;
      line-height: 70rpx;
      color: white;
      font-size: 28rpx;
    }
  }

  /deep/.uni-card .uni-card__header {
    border: none !important;
  }
</style>
